<template>
    <section class="content-wrapper">
        <el-row :gutter="20" v-loading="loading" element-loading-text="拼命加载中">
            <el-col :span="24" class="cms-form-box">

                <el-row>
                    <el-col>
                        <el-form :inline="false" :model="form" ref="form" :rules="rules" v-loading="loading" label-width="200px">

                            <el-row :gutter="20">
                                <el-col :span="10">
                                    <el-form-item label="是否开启注册关联优惠券">
                                        <el-switch
                                                v-model="couponEnabled"
                                                active-color="#13ce66"
                                                @change="handleChangeCouponEnabled">
                                        </el-switch>
                                    </el-form-item>
                                </el-col>
                            </el-row>

                            <el-row :gutter="20">
                                <el-col :span="15">
                                    <el-form-item label="注册优惠券关联">
                                        <el-select
                                                clearable
                                                v-model="form.couponId"
                                                placeholder="请选择"
                                                @change="handleChangeCoupon"
                                                style="width: 467px">
                                            <el-option
                                                    v-for="item in couponOptions"
                                                    :key="item.value"
                                                    :label="item.label"
                                                    :value="item.value">
                                            </el-option>
                                        </el-select>
                                    </el-form-item>
                                </el-col>
                            </el-row>


                            <el-form-item>
                                <el-button type="primary" @click="update">保 存</el-button>
                            </el-form-item>

                        </el-form>
                    </el-col>
                </el-row>

            </el-col>

        </el-row>



    </section>
</template>

<script>
    import { updated, load } from '@/api/xczs/config'
    import { combobox } from '@/api/xczs/coupon'


    const couponOptions = []

    export default {
        name: 'XczsConfig',
        data() {
            return {
                loading: false,
                form: {
                    id: null,
                    couponEnabled: 1,
                    couponId: null,
                },
                rules: {},
                couponEnabled: true,
                couponOptions
            }
        },
        created() {
            this.handlerLoad()
        },
        methods: {

            handlerLoad() {
                this.loading = true
                combobox().then(response => {
                    let data = response.data
                    this.couponOptions = []
                    if(null !== data) {
                        for(let item of data) {
                            this.couponOptions.push({value: item.id, label: item.title})
                        }
                    }
                }).then(() => {
                    load().then(response => {
                        Object.assign(this.form, response.data)
                        this.couponEnabled = this.form.couponEnabled === 1 ? true : false

                        this.loading = false
                    })
                })

            },

            handleChangeCouponEnabled(value) {
                if(value) {
                    this.form.couponEnabled = 1
                } else {
                    this.form.couponEnabled = 2
                }
            },
            handleChangeCoupon(value) {
                console.log(value)
            },

            update() {//修改数据
                if(this.form.couponId) {
                    if(this.form.couponId == null || this.form.couponId === '') {
                        this.$notify({
                            title: '提示', message: '未关联优惠券',
                            type: 'warning', duration: 2000
                        })
                        return
                    }
                }
                this.loading = true
                this.$refs['form'].validate((valid) => {
                    if(valid) {
                        updated(this.form).then(response => {
                            if(response.data.status) {
                                this.$notify({
                                    title: '成功', message: response.data.message,
                                    type: 'success', duration: 2000
                                })
                            } else {
                                this.$notify({
                                    title: '发生错误', message: response.data.message,
                                    type: 'error', duration: 2000
                                })
                            }
                            this.loading = false
                        })
                    }
                })
            }

        }
    }
</script>

<!-- 局部样式 -->
<style rel="stylesheet/scss" lang="scss" scoped>

</style>